<template>
    <div>
      <div class="product-en main-width">
        <span class="theme-color theme-border-color">NEWS CENTER</span>
      </div>
      <ul class="page-nav main-width">
        <li><nuxt-link to="/mainPage/news">集团新闻</nuxt-link></li>
      </ul>
      <div class="news-main main-width">
        <div class="news-l">
          <div class="title-img">
            <img src="/img/news/jt-new.png" alt="" style="width: 100%;">
            <!--<div class="title-text">-->
              <!--<p>集团新闻</p>-->
              <!--<p>Corporate Dynamics</p>-->
            <!--</div>-->
          </div>
          <div class="recommend-news" id="tj">
            <nuxt-link :to="'/newsDetail/news/'+tjNews.id">
              <div class="recommend-news-img">
                <img :src="tjNews.title_img" alt="">
              </div>
              <p class="recommend-news-title">{{tjNews.title}}</p>
              <p class="recommend-news-sub-content theme-color02">{{tjNews.sub_content}}</p>
            </nuxt-link>
          </div>
        </div>
        <div class="news-r">
          <div class="news-head-line" id="head-line">
            <nuxt-link :to="'/newsDetail/news/'+headLine.id">
              <div class="news-head-line-img" :style="{backgroundImage:'url('+headLine.title_img+')'}"></div>
              <div class="news-head-line-header">
                <div class="date">{{headLine.date}}</div>
                <div class="news-title news-main-width">{{headLine.title}}</div>
              </div>
              <p class="sub-content theme-color02">
                {{headLine.sub_content}}
              </p>
              <div class="check-head-line">头条详情 <img src="~static/img/news/check-head-line-icon.png" ></div>
            </nuxt-link>
          </div>
          <ul class="news-list01" id="news-list">
            <li v-for="item in newsList">
              <nuxt-link :to="'/newsDetail/news/'+item.id">
                <div class="date">{{item.date}}</div>
                <div class="news-info news-main-width">
                  <p class="news-title">{{item.title}}</p>
                  <p class="sub-content theme-color02">{{item.sub_content}}</p>
                </div>
              </nuxt-link>
            </li>

          </ul>
          <div class="more" v-if="isMore==1">
            <div style="flex:1;"></div>
            <div class="news-main-width theme-color02 more-main" @click="getMore">更多集团资讯 <img src="~static/img/news/check-head-line-icon.png" alt=""></div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: 'news',
    data(){
      return {
        page:1,
        num:5,
        isMore:false
      }
    },
    async asyncData({ $axios }) {
      const news = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_jtxw?p=1&num=5');
      const newsTj = await $axios.$get('http://tfngw.tfnhg.com//Api/New/get_tj');
      // console.log(news)
      let headLine = news.list[0];
      let newsLi = news.list.slice(1);
      let isMore = news.ok;
      // console.log(isMore)
      return {
        newsList:newsLi,
        headLine:headLine,
        tjNews:newsTj,
        isMore:isMore
      }
    },
    methods:{
      getMore(){
        this.page += 1;
        let that = this;
        axios.get('http://tfngw.tfnhg.com/Api/New/get_jtxw',{
          params:{
            p:this.page,
            num:5
          }
        }).then(function(res){
          // console.log(res)
          that.isMore = res.data.ok;
          let list = res.data.list;
          let newsList = that.newsList;
          for(let i in list){
            newsList.push(list[i])
          }
          that.newsList = newsList;
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .news-main{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .news-l{
    width: 32.2%;
    font-size: 0.15rem;
  }
  .news-r{
    width: 60.8%;
    font-size: 0.15rem;
  }
  .title-img{
    width: 100%;
    height:3.24rem;
    /*height:3.84rem;*/
    color:#fff;
    position:relative;
  }
  .title-img a{
    display: block;
    height:3.24rem;
    width: 100%;
  }
  .title-text{
    font-size: 0.15rem;
    position: absolute;
    left:0.187rem;
    bottom:0.14rem;
  }
  .recommend-news{
    margin-top: 0.77rem;
    width: 100%;
  }
  .recommend-news-img{
    width: 100%;
  }
  .recommend-news-img img{
    width: 100%;
  }
  .recommend-news-title{
    font-size: 0.2rem;
    margin: 0.1rem 0;
    line-height: 0.22rem;
  }
  .recommend-news-sub-content{
    line-height: 0.22rem;
    padding-bottom:0.1rem;
    border-bottom: 1px solid #e8e8e8;
  }
  .news-head-line{
    width: 100%;
    padding-bottom:0.1rem;
    border-bottom:1px solid #e8e8e8;
  }
  .news-head-line-img{
    width: 100%;
    height:3.24rem;
    /*height:3.84rem;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  .news-head-line-header{
    margin-top: 0.77rem;
    font-size: 0.22rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .news-head-line-header .date{
    color:#967e62;
    flex:1;
  }
  .news-main-width{
    width: 77.6%;
  }
  .news-head-line .news-title{
    overflow: hidden;
    text-overflow: ellipsis;
    height:0.22rem;
    white-space: nowrap;
    font-size: 0.22rem;
  }
  .news-head-line .sub-content{
    width: 100%;
    margin-top: 0.092rem;
    line-height: 0.22rem;
  }
  .check-head-line{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 0.17rem;
    margin-top: 0.2rem;
  }
  .check-head-line img{
    width: 0.3rem;
    height:0.18rem;
    margin-left: 5px;
  }
  .news-list01 li{
    width: 100%;
    padding:0.1rem 0;
    border-bottom: 1px solid #dededc;
  }
  .news-list01>li>a{
    display: flex;
    flex-flow: row nowrap;
  }
  .news-list01 .date{
    flex:1;
    font-size: 0.22rem;
  }
  .news-info{
    font-size: 0.15rem;
  }
  .news-info .news-title{
    font-size: 0.22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    height:0.22rem;
    white-space: nowrap;
  }
  .news-info .sub-content{
    line-height: 0.22rem;
    margin-top: 0.05rem;
  }
  .more{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 0.15rem;
    padding:0.1rem 0;
    cursor:pointer;
  }
  .more-main{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .more img{
    width: 0.3rem;
    height:0.15rem;
    margin-left: 5px;
  }
  .news-content{
    width: 100%;
    font-size: 0.15rem;
    line-height: 0.22rem;
  }
  .news-content p{
    line-height: 0.22rem;
    margin: 0.15rem 0;
  }
  .content img{
    max-width: 100%;
  }
  .news-content img{
    /*margin: 0.22rem 0;*/
    width: 100%;
  }
  .news-title{
    font-size: 0.22rem;
    text-align: left;
  }
  .news-date{
    font-size: 0.13rem;
    text-align:right;
    margin: 0.2rem 0;
  }

</style>
